// Vue 3 + TypeScript + Element Plus + Vite
// .cursorrules - Visual Studio Code settings for consistent development

// Project structure
const projectStructure = {
  src: {
    assets: "Static assets (images, fonts, etc.)",
    components: "Reusable UI components",
    composables: "Custom composition functions with useXXX naming",
    directives: "Custom Vue directives",
    layouts: "Layout components (e.g., DefaultLayout, AuthLayout)",
    router: "Vue Router configuration and route definitions",
    services: "API calls and external services",
    stores: "Pinia stores",
    types: "TypeScript interfaces, types, and enums",
    utils: "Utility functions",
    views: "Page components corresponding to routes",
    App.vue: "Root component",
    main.ts: "Application entry point",
    env.d.ts: "Environment variable type definitions"
  }
};

// Naming conventions
const namingConventions = {
  components: "PascalCase.vue", // e.g., UserProfile.vue
  composables: "camelCase.ts with useXxx prefix", // e.g., useAuth.ts
  interfaces: "PascalCase with I prefix", // e.g., IUser
  types: "PascalCase", // e.g., UserRole
  stores: "camelCase.ts", // e.g., userStore.ts
  constants: "UPPER_SNAKE_CASE", // e.g., API_ENDPOINTS
  cssClasses: "kebab-case", // e.g., user-avatar
  props: "camelCase", // e.g., userName
  events: "camelCase with on prefix", // e.g., @onUserCreated
};

// Coding standards
const codingStandards = {
  componentStructure: `
    <script setup lang="ts">
    // Imports
    import { ref, computed, onMounted } from 'vue';
    import { useRoute } from 'vue-router';
    import { ElMessage } from 'element-plus';
    
    // Types
    interface IProps {
      title: string;
      items: Array<IItem>;
    }
    
    // Props, emits
    const props = defineProps<IProps>();
    const emit = defineEmits<{
      (e: 'update', value: string): void;
    }>();
    
    // State
    const loading = ref(false);
    
    // Computed
    const formattedTitle = computed(() => props.title.toUpperCase());
    
    // Methods
    const handleSubmit = () => {
      // Implementation
    };
    
    // Lifecycle
    onMounted(() => {
      // Implementation
    });
    </script>
    
    <template>
      <div class="component-wrapper">
        <!-- Template content -->
      </div>
    </template>
    
    <style scoped lang="scss">
    .component-wrapper {
      // Styles
    }
    </style>
  `,
  
  elementPlusBestPractices: [
    "Use ElConfigProvider for global configuration",
    "Register only used components for tree-shaking",
    "Use Element Plus built-in types",
    "Prefer composition API with ElMessage, ElMessageBox, etc.",
    "Implement custom themes using CSS variables",
    "Create composables for common form operations"
  ],
  
  typescriptBestPractices: [
    "Enable strict mode in tsconfig.json",
    "Define interfaces for API responses and requests",
    "Use type inference when possible",
    "Create type guards for complex conditional logic",
    "Use utility types (Pick, Omit, Partial, etc.)",
    "Avoid any type when possible",
    "Use unknown for truly unknown values",
    "Create separate declaration files for complex types"
  ],
  
  viteBestPractices: [
    "Use environment variables with import.meta.env",
    "Configure aliases for common paths",
    "Optimize assets with vite-plugin-imagemin",
    "Use vite-plugin-pages for file-based routing",
    "Configure proper CSS preprocessing",
    "Implement code splitting for better loading performance",
    "Use vite-plugin-vue-layouts for layout system"
  ]
};

// Linting and formatting
const lintingAndFormatting = {
  eslint: {
    extends: [
      "plugin:vue/vue3-recommended",
      "@vue/typescript/recommended",
      "prettier"
    ],
    rules: {
      "vue/component-name-in-template-casing": ["error", "PascalCase"],
      "vue/html-self-closing": ["error", { html: { void: "always" } }],
      "@typescript-eslint/explicit-function-return-type": "off",
      "@typescript-eslint/no-explicit-any": "warn"
    }
  },
  prettier: {
    printWidth: 100,
    tabWidth: 2,
    useTabs: false,
    semi: true,
    singleQuote: true,
    trailingComma: "es5",
    bracketSpacing: true,
    arrowParens: "avoid"
  }
};

// Testing standards
const testingStandards = {
  framework: "Vitest",
  componentTesting: "Vue Test Utils",
  endToEnd: "Cypress",
  namingConvention: "*.spec.ts",
  coverage: {
    statements: 80,
    branches: 80,
    functions: 80,
    lines: 80
  }
};

// Commit message format
const commitMessageFormat = {
  format: "<type>(<scope>): <subject>",
  types: [
    "feat", // New feature
    "fix", // Bug fix
    "docs", // Documentation
    "style", // Formatting, missing semicolons, etc.
    "refactor", // Code change that neither fixes a bug nor adds a feature
    "perf", // Performance improvements
    "test", // Adding tests
    "chore", // Maintenance tasks
    "ci", // CI related changes
    "build" // Build system changes
  ],
  scope: "Optional, can be component name, file name, etc.",
  subject: "Imperative, present tense description"
};

// VS Code recommended extensions
const vsCodeExtensions = [
  "Vue.volar", // Vue 3 support
  "Vue.vscode-typescript-vue-plugin", // TypeScript support for Vue
  "dbaeumer.vscode-eslint", // ESLint
  "esbenp.prettier-vscode", // Prettier
  "antfu.iconify", // Icon support
  "lokalise.i18n-ally", // i18n support
  "streetsidesoftware.code-spell-checker", // Spell checking
  "eamodio.gitlens", // Git integration
  "editorconfig.editorconfig", // EditorConfig
  "yoavbls.pretty-ts-errors" // Better TypeScript errors
];

// Export all rules
export {
  projectStructure,
  namingConventions,
  codingStandards,
  lintingAndFormatting,
  testingStandards,
  commitMessageFormat,
  vsCodeExtensions
};
